<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
  <view>
    <view class="uni-padding-wrap">
      <view class="uni-title">日期：{{ year }}年{{ month }}月{{ day }}日</view>
    </view>
    <picker-view
      v-if="visible"
      :indicator-style="indicatorStyle"
      :value="value"
      @change="bindChange"
      class="picker-view"
    >
      <picker-view-column>
        <view class="item" v-for="(item, index) in years" :key="index"
          >{{ item }}年</view
        >
      </picker-view-column>
      <picker-view-column>
        <view class="item" v-for="(item, index) in months" :key="index"
          >{{ item }}月</view
        >
      </picker-view-column>
      <picker-view-column>
        <view class="item" v-for="(item, index) in days" :key="index"
          >{{ item }}日</view
        >
      </picker-view-column>
    </picker-view>
  </view>
</template>

<script>
  export default {
    data: function () {
      const date = new Date();
      const years = [];
      const year = date.getFullYear();
      const months = [];
      const month = date.getMonth() + 1;
      const days = [];
      const day = date.getDate();
      for (let i = 1990; i <= date.getFullYear(); i++) {
        years.push(i);
      }
      for (let i = 1; i <= 12; i++) {
        months.push(i);
      }
      for (let i = 1; i <= 31; i++) {
        days.push(i);
      }
      return {
        title: "picker-view",
        years,
        year,
        months,
        month,
        days,
        day,
        value: [9999, month - 1, day - 1],
        visible: true,
        indicatorStyle: `height: 50px;`,
      };
    },
    methods: {
      bindChange: function (e) {
        const val = e.detail.value;
        this.year = this.years[val[0]];
        this.month = this.months[val[1]];
        this.day = this.days[val[2]];
      },
    },
  };
</script>

<style>
  .picker-view {
    width: 750rpx;
    height: 600rpx;
    margin-top: 20rpx;
  }
  .item {
    line-height: 100rpx;
    text-align: center;
  }
</style>
